<template>
  <view class="container">
    <!-- 横向布局容器 -->
    <view class="row-layout">
      <!-- 心理健康评分 -->
      <view class="score-card">
        <view class="score-header">
          <uni-icons type="star-filled" size="24" color="#FFC107"></uni-icons>
          <text class="score-label">心理健康指数</text>
        </view>
        <view class="score-number">{{ source }}</view>
        <view class="score-progress">
          <view class="progress-bar" :style="{ width: source + '%' }">
            <view class="progress-dot"></view>
          </view>
          <view class="progress-labels">
            <text>0</text>
            <text>100</text>
          </view>
        </view>
      </view>

      <!-- 心情选择 -->
      <view class="mood-section">
        <text class="section-title">今日心情记录</text>
        <view class="mood-options">
          <view 
            v-for="(mood, index) in moods" 
            :key="index"
            class="mood-item"
            :class="{ active: selectedMood === index }"
            @click="selectMood(index)"
            :style="{ backgroundColor: mood.color + '10' }"
          >
            <uni-icons 
              :type="selectedMood === index ? 'checkmarkempty' : 'circle'" 
              size="20" 
              :color="mood.color"
            ></uni-icons>
            <text :style="{ color: mood.color }">{{ mood.label }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 待办事项 -->
    <view class="todo-section">
      <view class="section-header">
        <uni-icons type="list" size="28" color="#333"></uni-icons>
        <text class="section-title">今日待办</text>
      </view>
      <view class="todo-list">
        <view 
          v-for="(item, i) in todos" 
          :key="i"
          class="todo-item"
          @click="toggleTodo(i)"
        >
          <view class="checkbox-wrapper">
            <uni-icons 
              :type="item.done ? 'checkbox-filled' : 'checkbox-blank'" 
              size="24"
              :color="item.done ? '#4CAF50' : '#999'"
            ></uni-icons>
          </view>
          <text :class="{ 'completed-text': item.done }">事项{{ i+1 }}</text>
          <view class="priority-tag" :class="'priority-' + (i % 3 + 1)"></view>
        </view>
      </view>
    </view>
	
    <!-- 问卷记录 -->
    <view class="survey-section">
      <view class="section-header">
        <uni-icons type="compose" size="28" color="#333"></uni-icons>
        <text class="section-title">已完成的评估</text>
      </view>
      <view class="survey-list">
        <view 
          v-for="(survey, idx) in surveys" 
          :key="idx"
          class="survey-item"
        >
          <view class="survey-icon">
            <uni-icons type="checkbox-filled" size="20" color="#4CAF50"></uni-icons>
          </view>
          <view class="survey-info">
            <text class="survey-title">{{ survey.title }}</text>
            <text class="survey-date">{{ survey.date }}</text>
          </view>
          <uni-icons type="right" size="20" color="#999"></uni-icons>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      source: 90,
      moods: [
        { label: 'excellent', color: '#4CAF50' },
        { label: 'general', color: '#FFC107' },
        { label: 'bad', color: '#F44336' }
      ],
      selectedMood: null,
      todos: Array(6).fill().map((_,i) => ({
        id: i+1,
        text: `事项${i+1}`,
        done: false
      })),
      surveys: [
        { title: '焦虑自评量表', date: '2025-04-05' },
        { title: '抑郁症状筛查', date: '2025-04-03' }
      ]
    }
  },
  methods: {
    selectMood(index) {
      this.selectedMood = this.selectedMood === index ? null : index
      uni.showToast({
        title: `已记录${this.moods[index].label}心情`,
        icon: 'success'
      })
	  if(index==0){
		  this.source+=1;
	  }if(index==2){
		  this.source-=1
	  }
	  
    },
    toggleTodo(index) {
      this.todos[index].done = !this.todos[index].done
      this.$forceUpdate()
    }
  }
}
</script>

<style lang="scss">
$primary-color: #2196F3;
$secondary-color: #64B5F6;
$success-color: #4CAF50;
$warning-color: #FFC107;
$error-color: #F44336;

$card-shadow: 0 8rpx 24rpx rgba(0,0,0,0.08);
$transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

.container {
  background: linear-gradient(180deg, #f8f9fa 0%, #f1f3f5 100%);
}

/* 横向布局核心样式 */
.row-layout {
  display: flex;
  gap: 24rpx;
  margin-bottom: 32rpx;
  
  & > view {
    flex: 1;
    min-width: 0;
    background: white;
    border-radius: 32rpx;
    padding: 32rpx;
    box-shadow: $card-shadow;
    transition: $transition;
    
    &:active {
      transform: scale(0.98);
    }
  }
}

/* 评分卡片优化 */
.score-card {
  position: relative;
  overflow: hidden;
  
  .score-header {
    display: flex;
    align-items: center;
    gap: 12rpx;
    margin-bottom: 24rpx;
    
    .score-label {
      font-size: 32rpx;
      color: #444;
      font-weight: 500;
    }
  }
  
  .score-number {
    font-size: 72rpx;
    color: $primary-color;
    text-align: center;
    margin: 40rpx 0;
    position: relative;
    
    &::after {
      content: '';
      position: absolute;
      bottom: -20rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 80rpx;
      height: 4rpx;
      background: linear-gradient(90deg, $primary-color, $secondary-color);
    }
  }
  
  .score-progress {
    margin-top: 48rpx;
    
    .progress-bar {
      height: 16rpx;
      border-radius: 8rpx;
      background: linear-gradient(90deg, $primary-color, $secondary-color);
      position: relative;
      transition: width 0.8s ease;
      
      .progress-dot {
        position: absolute;
        right: -8rpx;
        top: 50%;
        transform: translateY(-50%);
        width: 24rpx;
        height: 24rpx;
        background: white;
        border: 4rpx solid $primary-color;
        border-radius: 50%;
      }
    }
    
    .progress-labels {
      display: flex;
      justify-content: space-between;
      margin-top: 16rpx;
      color: #888;
      font-size: 24rpx;
    }
  }
}

/* 心情选择区优化 */
.mood-section {
  .mood-options {
    display: grid;
    gap: 24rpx;
    margin-top: 32rpx;
    
    .mood-item {
      padding: 32rpx;
      border-radius: 24rpx;
      display: flex;
      align-items: center;
      gap: 16rpx;
      transition: $transition;
      
      &.active {
        box-shadow: 0 4rpx 12rpx rgba($primary-color, 0.15);
        
        &::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          border: 2rpx solid $primary-color;
          border-radius: 24rpx;
        }
      }
    }
  }
}

/* 待办事项优化 */
.todo-section {
  background: white;
  border-radius: 32rpx;
  padding: 32rpx;
  margin-bottom: 32rpx;
  box-shadow: $card-shadow;
  
  .section-header {
    display: flex;
    align-items: center;
    gap: 16rpx;
    margin-bottom: 32rpx;
  }
  
  .todo-item {
    display: flex;
    align-items: center;
    padding: 28rpx 0;
    border-bottom: 1rpx solid #eee;
    
    .checkbox-wrapper {
      margin-right: 24rpx;
    }
    
    .priority-tag {
      width: 12rpx;
      height: 32rpx;
      border-radius: 6rpx;
      margin-left: auto;
      
      &.priority-1 { background: $success-color; }
      &.priority-2 { background: $warning-color; }
      &.priority-3 { background: $error-color; }
    }
    
    .completed-text {
      color: #999;
      text-decoration: line-through;
    }
  }
}

/* 问卷记录优化 */
.survey-section {
  background: white;
  border-radius: 32rpx;
  padding: 22rpx;
  box-shadow: $card-shadow;
  
  .survey-item {
    display: flex;
    align-items: center;
    padding: 28rpx 0;
    border-bottom: 1rpx solid #eee;
    
    .survey-icon {
      margin-right: 24rpx;
    }
    
    .survey-info {
      flex: 1;
      
      .survey-title {
        display: block;
        color: #444;
        font-size: 28rpx;
      }
      
      .survey-date {
        color: #888;
        font-size: 24rpx;
      }
    }
  }
}

.section-title {
  font-size: 36rpx;
  color: #333;
  font-weight: 600;
}

/* 响应式适配 */
@media (max-width: 768px) {
  .row-layout {
    flex-direction: column;
    gap: 32rpx;
    
    & > view {
      width: 100%;
      padding: 24rpx;
    }
  }
  
  .score-card .score-number {
    font-size: 64rpx;
    margin: 32rpx 0;
  }
  
  .mood-options {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .todo-item, .survey-item {
    padding: 24rpx 0;
  }
}
</style>